<template>
  <transition name="fade">
    <div class="vlonChooseProject" v-if="visible">
      <div class="box">
        <div class="head">
          <div class="left">选择项目</div>
          <div class="right">
            <el-button type="default" class="close" @click="closeThisWindow">
              <i class="el-icon-close"></i>
            </el-button>
          </div>
        </div>
        <div class="body">
          <el-table
            :data="tableData"
            height="400"
            style="
              margin-bottom: 15px;
              border-top: 1px solid #eee;
              border-left: 1px solid #eee;
              border-right: 1px solid #eee;
            "
            @select="handleSelectChange"
            @select-all="handleSelectAllChange"
          >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column prop="proName" label="项目名称">
              <template slot-scope="scope">
                <div style="display: flex; align-items: center">
                  <span style="width: 40px; display: flex; align-items: center">
                    <img
                      :src="scope.row.proLogo"
                      v-if="scope.row.proLogo"
                      width="30"
                      height="30"
                      style="margin-right: 10px"
                    />
                  </span>
                  <span>{{ scope.row.proName }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="four"
              label="项目类型"
            ></el-table-column>
            <el-table-column
              prop="cTime"
              label="修改时间"
              width="180"
            ></el-table-column>
          </el-table>
          <div style="display: flex; justify-content: flex-end">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pages.currentPage"
              :page-sizes="pages.pageSizes"
              :page-size="pages.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pages.total"
            ></el-pagination>
          </div>
        </div>
        <div class="foot">
          <el-button @click="closeThisWindow" style="margin-right: 50px"
            >取 消</el-button
          >
          <el-button type="primary" @click="chooseAfterConfirm"
            >保 存</el-button
          >
        </div>
      </div>
    </div>
  </transition>
</template>
<script>
import { mapState } from "vuex";
import tbLogo from "@/static/images/tb.png";
import zfbLogo from "@/static/images/zfb.png";
import jdLogo from "@/static/images/jd.png";
import mtLogo from "@/static/images/mt.png";
import Bus from "@/utils/bus";
import { getToken } from "@/utils/auth";
import headApi from '@/utils/hade';
export default {
  name: "VlonChooseProject",
  data() {
    return {
      visible: false,
      tableData: [
        // {
        //   id: 1,
        //   logo: tbLogo,
        //   title: "淘宝",
        //   columnName: "商城首页",
        //   columnLogo: "",
        //   updateTime: "2022-03-20 11:25:15",
        // },
      ],
      selected: [], //已勾选中的列表项
      pages: {
        currentPage: 1,
        total: 0,
        pageSize: 10,
        pageSizes: [10, 20, 30],
      },
      sourceData:null
    };
  },
  created() {},
  props: [],
  components: {},
  mounted() {
    this.getTableList();
    Bus.$off("openChoosProjectGroup");
    Bus.$on("openChoosProjectGroup", (params) => {
      // //console.log("已接收到打开选择跳转链接打开弹窗的要求",params);
      this.visible = true;
      this.sourceData = JSON.stringify(params);
      //编辑时，回写选中状态
      if (params.linkName) {
        //遍历回写选中
      }
    });
  },
  methods: {
    //获取项目列表
    getTableList(){
      if(getToken()) {
        this.axios.get(`${headApi}/business/project/list?pageNum=${this.pages.currentPage}&pageSize=${this.pages.pageSize}`, { headers: { Authorization: "Bearer " + getToken() } }).then(res=>{
          let {code, data, msg} = res.data;
          if(code == 200) {
            let list = data.list;
            if(list && list.length>0) {
              this.tableData = list;
            } else {
              //项目列表为空
            }
          } else {
            this.$message.warning(msg);
          }
        }).catch(err=>{
          console.log(err);
        })
      }
    },
    //单个勾选
    handleSelectChange(selection, row){
      if(selection && selection.length>0) {
        if(selection.some(item=>item.proId == row.proId)) {
          //勾选中
          if(!this.selected.some(item=>item.proId == row.proId)) {
            this.selected.push(row);
          }
        } else {
          //取消row的勾选状态
          if(this.selected.some(item=>item.proId == row.proId)) {
            this.selected = this.selected.filter(item.proId != row.proId);
          }
        }
      } else {
        //取消row的勾选状态
        if(this.selected.some(item=>item.proId == row.proId)) {
          this.selected = this.selected.filter(item.proId != row.proId);
        }
      }
    },
    //全选
    handleSelectAllChange(selection){
      if(selection && selection.length>0) {
        //全选
        selection.forEach(row => {
          if(!this.selected.some(item=>item.proId == row.proId)) {
            this.selected.push(row);
          }
        })
      } else {
        //全不选
        this.tableData.forEach(row => {
          if(this.selected.some(item=>item.proId == row.proId)) {
            this.selected = this.selected.filter(item.proId != row.proId);
          }
        })
      }
    },
    //关闭弹窗
    closeThisWindow() {
      this.visible = false;
    },
    //勾选完成后，点击确定按钮执行的保存事件
    chooseAfterConfirm() {
      let sd = JSON.parse(this.sourceData);
      Bus.$emit(`choosProjectGroupAfter${sd.controlid}`, this.selected)
      this.closeThisWindow();
    },
    //切换每页展示的记录条数
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.pages.currentPage = 1;
      this.getTableList();
    },
    //列表翻页
    handleCurrentChange(page) {
      this.pages.currentPage = page;
      this.getTableList();
    },
  },
  computed: mapState(["decorate"]),
  watch: {},
};
</script>
<style scoped lang="scss">
.vlonChooseProject {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 1001;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  .box {
    width: 1000px;
    height: 610px;
    background-color: #fff;
    border-radius: 3px;
    & > .head {
      display: flex;
      width: 100%;
      height: 40px;
      border-bottom: 1px solid #eee;
      align-items: center;
      justify-content: space-between;
      padding: 0 10px;
      box-sizing: border-box;
      & > .left {
        font-size: 14px;
        color: #666;
      }
      & > .right {
        display: flex;
        justify-content: flex-end;
        .close {
          border: none;
          background-color: transparent;
          width: 40px;
          height: 100%;
          .el-icon-close {
            font-size: 18px;
          }
        }
      }
    }
    & > .body {
      display: flex;
      width: 100%;
      flex-direction: column;
      padding: 15px;
      box-sizing: border-box;
      height: calc(100% - 90px);
      position: relative;
      overflow: hidden;

      .wrapper {
        ul.shangChengYeMian {
          display: flex;
          flex-direction: column;
          li {
            display: flex;
            flex-direction: column;
            span.head {
              font-size: 14px;
              height: 50px;
              display: flex;
              align-items: center;
              font-weight: bold;
              padding-left: 15px;
            }
            & > .body {
              display: flex;
              flex-wrap: wrap;
              padding-left: 15px;
              width: 100%;
              padding-top: 15px;
              box-sizing: border-box;
              .link {
                font-size: 14px;
                margin-bottom: 15px;
                margin-right: 15px;
                width: 130px;
                padding-left: 10px;
                padding-right: 10px;
                white-space: normal;
              }
              .el-button + .el-button {
                margin-left: 0;
              }
            }
          }
        }
      }
    }
    & > .foot {
      display: flex;
      width: 100%;
      height: 50px;
      border-top: 1px solid #eee;
      box-sizing: border-box;
      align-items: center;
      justify-content: center;
      .confirm {
        margin-left: 50px;
      }
    }
  }
}
</style>
